<!--
 * @Description: 主页列表部分
 * @Author: 崔堂袁
 * @Date: 2021-04-19 22:07:51
 * @LastEditTime: 2021-05-10 09:01:48
-->

<template>

  <a-spin :spinning="spinning">
    <div class="home-content-list-box">
      <div class="home-content-list-item"
           v-for="(achievementsItem, achievementsIndex) in userData"
           :key="achievementsIndex">
        <img :src="achievementsItem.strPhoto">
        <div class="desc">
          <div class="programName">{{achievementsItem.programName}}</div>
          <div class="twoBtn">
            <button class="edit"
                    @click="editHandler(achievementsItem)">{{$t('lang.home.edit')}}</button>
            <button class="delete"
                    @click="deleteConfirm(achievementsItem.programName)">{{$t('lang.home.delete')}}</button>
            <a-modal class="userModal"
                     v-model:visible="isShowConfirmDelete"
                     :title="$t('lang.homeList.attention')"
                     :okText="$t('lang.homeList.determine')"
                     :cancelText="$t('lang.homeList.cancel')"
                     @ok="handleDelete">
              {{$t('lang.homeList.deletePrompt')}}
            </a-modal>
          </div>
        </div>
      </div>
      <!-- 占位符，目的为了最后一行左对齐 -->
      <i /><i /><i /><i /><i /><i /><i /><i /><i /><i /><i /><i /><i /><i /><i /><i /><i /><i />
    </div>
  </a-spin>
</template>

<script>
import { onMounted, ref, getCurrentInstance } from 'vue'
import { useStore } from 'vuex'
export default {
  setup () {
    const { proxy } = getCurrentInstance()
    const store = useStore()
    const spinning = ref(true)
    // 初始化数据
    const userData = ref([])
    const userAccount = sessionStorage.getItem('userAccount')
    onMounted(() => {
      spinning.value = true
      getDataFromMysql()
    })
    const getDataFromMysql = () => {
      proxy.$http.post('/api/user/getData', { userAccount })
        .then((res) => {
          const result = res.data
          if (!result.errno) {
            userData.value = []
            result.forEach(item => {
              userData.value.push(item)
            })
            spinning.value = false
          } else {
            console.log('err')
          }
        })
    }
    // 删除数据
    const isShowConfirmDelete = ref(false) // 控制创建确认删除弹框
    const willDeleteProgramName = ref('')
    const deleteConfirm = (programName) => {
      willDeleteProgramName.value = programName
      isShowConfirmDelete.value = true
    }
    const handleDelete = () => { // 确认删除
      isShowConfirmDelete.value = false
      spinning.value = true
      proxy.$http.post('/api/user/deleteData', { userAccount, programName: willDeleteProgramName.value })
        .then((res) => {
          if (!res.data.errno) {
            getDataFromMysql()
          } else {
            console.log('err')
          }
        })
    }
    // 重新编辑场景
    const editHandler = (programItem) => {
      store.commit('editOrNewDesignControl/enterEditDesign')
      store.commit('editOrNewDesignControl/updateProgramName', programItem.programName)
      store.commit('threeComponents/updateStrScene', programItem.strScene)
      proxy.$router.push('/editDesign')
    }

    return {
      userData,
      editHandler,
      deleteConfirm,
      spinning,
      isShowConfirmDelete,
      handleDelete
    }
  }
}
</script>

<style lang='less' scoped>
.home-content-list-box {
  width: 100%;
  padding: 10px 80px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 10px 0;
  /*内容没有超出时隐藏滚动条*/
  & {
    overflow-x: hidden;
    overflow-y: auto;
    color: #000;
    font-size: 0.7rem;
    font-family: "\5FAE\8F6F\96C5\9ED1", Helvetica, "黑体", Arial, Tahoma;
    height: 100%;
  }
  /*滚动条样式*/
  &::-webkit-scrollbar {
    width: 4px;
    /*height: 4px;*/
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    background: @baseColor;
    &:hover {
      background-color: @fontColor;
    }
  }
  &::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    background: rgb(196, 192, 192);
  }

  .home-content-list-item {
    width: 200px;
    height: 210px;
    margin: 10px 0;
    border: 1px solid gainsboro;
    border-radius: 5px;
    transition: 0.1s linear;
    background-color: white;
    padding: 10px 10px 0 10px;
    z-index: 0;
    &:hover {
      box-shadow: 0px 0px 5px @baseColor;
      // transform: scale(1.1);
      // z-index: 1;
    }
    img {
      width: 180px;
      height: 160px;
    }
    .desc {
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      .programName {
        flex: 1;
        text-align: center;
        text-overflow: ellipsis;
      }
      .twoBtn {
        flex: 1;
        display: flex;
        justify-content: space-between;
        button {
          background-color: inherit;
          border: 1px solid rgba(0, 0, 0, 0.3);
          border-radius: 4px;
          cursor: pointer;
        }
        .edit {
          &:hover {
            border-color: @baseColor;
            box-shadow: 2px 2px 4px @baseColor;
          }
          &:active {
            box-shadow: none;
          }
        }
        .delete {
          &:hover {
            background-color: rgb(226, 61, 61);
            border-color: rgb(226, 61, 61);
            box-shadow: 2px 2px 4px rgb(226, 61, 61);
            color: @bgColor;
          }
          &:active {
            box-shadow: none;
          }
        }
      }
    }
  }
  & > i {
    width: 200px;
  }
}
</style>
